<template>
    <div>
        <Spin fix v-if="ifSpin">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>附件生成中</div>
        </Spin>
        <Form :label-width="90" ref="formInline" :model="formInline">
            <Row :gutter="16" class="query-form">
                <i-col span="8">
                    <FormItem label="年份：">
                        <DatePicker v-model="formInline.year1" type="year" style="width: 100%" placeholder="请选择年份"
                            @on-change="()=>{if(formInline.year1 instanceof Date){formInline.rankDate = formInline.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <FormItem label="阶段：">
                        <Select v-model="formInline.type">
                            <Option v-for="item in halfList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <div style="float: right;">
                        <Button class="ivu-btn-reset" @click="cancel">重置</Button>
                        <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                    </div>
                </i-col>
            </Row>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportExcel">导出</Button>
            </i-col>
        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
    </div>
</template>

<script>

    import {Api} from '../../../api'

    export default {
        name: "assessmentOrgRankYear",
        data(){
            return{
                ifSpin: false,
                formInline:{},
                tableHeight: '',
                loading: false,
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '单位名称',
                        key: 'orgName',
                        align: 'center',
                    },
                    {
                        title: '分数',
                        key: 'source',
                        align: 'center',
                    },
                    {
                        type: 'index',
                        title: '排名',
                        width: 120,
                        align: 'center',
                    },
                ],
                infos: [],
                halfList: [
                    {
                        value: 1,
                        label: '上半年'
                    },
                    {
                        value: 2,
                        label: '下半年'
                    }
                ]
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 105;
            this.cancel();
        },
        methods: {
            exportExcel() {
                this.ifSpin = true;
                this.$http.get(Api.apsgAssessmentAbnormalRank + '/excel', {
                    params: this.formInline,
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    });
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "单位得分排名.xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.ifSpin = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            query(){
                this.loading = true;
                this.$http.get(Api.apsgAssessmentAbnormalRank, {params: this.formInline}).then((res) => {
                    this.infos = res.data.data;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            cancel(){
                this.formInline.type = 1;
                let date = new Date()
                this.formInline.year1=date
                this.formInline.rankDate = date.getFullYear();
                this.query();
            }
        }
    }
</script>

<style scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
